<template>
    <div>
        图片懒加载
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <img v-imgLazy="item" />
            </li>
        </ul>
    </div>
</template>

<script>
    // import imgLazy from '@/common/imgLazy.js'
    export default {
        // directives: {
        //     imgLazy: imgLazy,
        // },
        data() {
            return {
                list: [
                    require('@/assets/img/1.jpg'),
                    require('@/assets/img/2.jpg'),
                    require('@/assets/img/3.jpg'),
                    require('@/assets/img/4.jpg'),
                    require('@/assets/img/5.jpg'),
                    require('@/assets/img/6.jpg'),
                    require('@/assets/img/7.jpg'),

                ]
            }
        },
    }
</script>

<style  scoped>
img{
  width: 200px;
  height: 200px;
}
</style>

